<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06自定义JS对象</title>
</head>
<body>
    <table border="1">
        <caption>商品表</caption>
        <tr>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>商品库存</th>
        </tr>
    </table>

    <script>
        let p1 = {
            name: '张三',
            age: 18,
            say: function (){
                console.log('hello,我是' + this.name);
            }
        };
        console.log(p1);
        p1.say();

        //2.先定义一个空对象,再动态添加属性与方法
        let p2 = {};
        p2.name = '李四';
        p2.age = 20;
        p2.eat = function (){
            console.log(this.name + '正在吃东西...');
        }
        console.log(p2);
        p2.eat();

        //3.定义一个数组,存放多个商品对象
        let productArr = [
            {title: '小米14', price: 8000, num: 200},
            {title: '华为mate60', price: 6000, num: 500},
            {title: '苹果16', price: 9000, num: 100},
            {title: '魅族', price: 3000, num: 300}
        ];
        console.log(productArr);
        console.log(productArr[2]);

        //将数据装到表格里
        let tableE = document.querySelector('table');
        //遍历商品数组
        for(let i=0; i<productArr.length; i++){
            let trE = document.createElement('tr');
            let titleTd = document.createElement('td');
            let priceTd = document.createElement('td');
            let numTd = document.createElement('td');
            //赋值
            titleTd.innerHTML = productArr[i].title;
            priceTd.innerHTML = productArr[i].price;
            numTd.innerHTML = productArr[i].num;
            //tr中添加td,table中添加tr
            trE.append(titleTd, priceTd, numTd);
            tableE.append(trE);
        }

    </script>
</body>
</html>










